import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View, Button, Image, ImageBackground, TouchableOpacity} from 'react-native'

export default class CurChildren extends Component {
  // 切换孩子
  switchChildren(){
  }
  // 动态生成页面
  dynamicView(){
    let dynamicView = this.props.page == 'Home' ? 
    <TouchableOpacity
      onPress={() => {
        this.switchChildren();
      }}>
      <Text style={styles.switchChildren}>切换</Text>
    </TouchableOpacity>
    : 
    <Text style={styles.curChildrenClass}>小公主预科A1班</Text>;
    return dynamicView;
  }
  render() {
    return (
      <ImageBackground style={styles.curChildrenContainer}
        source={require('../assets/imgs/bg.png')}>
        <View style={styles.curChildrenMain}>
          <Image
            style={styles.curChildrenImg}
            source={require('../assets/imgs/my.jpg')}
          />
          <View style={styles.curChildrenInfo}>
            <Text style={styles.curChildrenName}>石桉琦小公主</Text>
            {this.dynamicView()}
          </View>
        </View>
    </ImageBackground>
    )
  }
}

const styles = StyleSheet.create({
  curChildrenContainer: {
    height: 210,
    backgroundColor: '#AC1F28'
  },
  curChildrenMain: {
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    marginLeft: 16, 
    marginRight: 16,
  },
  curChildrenImg: {
    width: 80,
    height: 80,
    borderColor: '#FFFFFF',
    borderWidth: 2,
    borderRadius: 40,
  },
  curChildrenInfo: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginLeft: 10,
  },
  curChildrenName: {
    width: '100%',
    color: '#fff',
    fontSize: 18,
    fontWeight: ('normal', '500'),
    fontFamily: 'PingFangSC-Medium',
  },
  curChildrenClass: {
    color: '#fff',
    fontSize: 14,
    fontWeight: ('normal', '400'),
    fontFamily: 'PingFangSC-Regular',
  },
  switchChildren: {
    color: '#3E73FF',
    backgroundColor: '#fff',
    paddingLeft: 8,
    paddingRight: 8,
    marginTop: 8,
    borderColor: '#3E73FF',
    borderWidth: 0.5,
    borderRadius: 10,
  },
})